<template>
  <a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true"
            @close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
                    <a-button @click="toggleScreen" icon="appstore"
                              style="height:20px;width:20px;border:0px"></a-button>
                </span>
      </div>

    </template>

    <template>

      <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="disabled">
          <a-form-model ref="form" :model="model" slot="detail" id="longTextLabel">
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="任务名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="taskName">
                  <a-input v-model="model.taskName" placeholder="请输入任务名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="taskCron">
                  <span slot="label" style="white-space: normal">任务执行的cron表达式</span>
                  <a-input v-model="model.taskCron" placeholder="请输入任务执行的cron表达式"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="taskState">
                  <span slot="label" style="white-space: normal">任务状态 0暂停  1执行 2删除</span>
                  <a-select v-model="model.taskState">
                    <a-select-option :key="item.tid" v-for="item in taskState_options" :value="item.tid">{{
                        item.value }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="任务描述" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="taskDesc">
                  <a-input v-model="model.taskDesc" placeholder="请输入任务描述"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="任务的同步方式" :labelCol="labelCol"
                                   :wrapperCol="wrapperCol" prop="collectType">
                  <a-select v-model="model.collectType">
                    <a-select-option :key="item.tid" v-for="item in collectType_options" :value="item.tid">{{
                        item.value }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="taskSql">
                  <span slot="label" style="white-space: normal">任务查询的sql</span>
                  <a-textarea v-model="model.taskSql" rows="4" placeholder="请输入任务查询的sql" />
                  <a-button @click="jxcx" style="margin-right: .8rem" type="primary" :loading="confirmLoading">即席查询前10条数据</a-button>
                  <a-button @click="genFieldMap" type="primary" :loading="confirmLoading">数据映射</a-button>

                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="sql关联的数据源" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="sourceType">
                  <a-select v-model="model.sourceId">
                    <a-select-option :key="item.tid" v-for="item in options" :value="item.tid">{{
                        item.sourceName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>

              </a-col>
              <a-col :span="24">
                <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="syncType">

                  <span slot="label" style="white-space: normal">同步方式全量还是增量</span>
                  <!-- <a-input v-model="model.syncType" placeholder="请输入同步方式全量还是增量 （0全量  1增量）"></a-input> -->
                  <a-select v-model="model.syncType">
                    <a-select-option :key="item.tid" v-for="item in syncType_options" :value="item.tid">{{
                        item.value }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="增量字段" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="incrementField">
                  <a-input v-model="model.incrementField" placeholder="请输入增量字段"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="增量扩展时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="extraDur">
                  <a-input-number v-model="model.extraDur" placeholder="请输入增量扩展时间" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item :labelCol="labelCol"
                                   :wrapperCol="wrapperCol" prop="appendType">
                  <span slot="label" style="white-space: normal">添加方式(insert,replace)</span>
                  <a-select v-model="model.appendType">
                    <a-select-option :key="item.tid" v-for="item in appendType_options" :value="item.tid">{{
                        item.value }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
    </template>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>

    <task-sql-j-x-modal ref="jxTable" ></task-sql-j-x-modal>
    <task-sql-field-map-modal ref="fieldMap" ></task-sql-field-map-modal>
  </a-drawer>


</template>

<script>
import moment from 'moment'
import { editCollectTask, addCollectTask } from '@/api/apiDs'
import { disabledAuthFilter } from '@/utils/authFilter'
import { httpAction, getAction, postAction } from '@/api/manage'
import TaskSqlJXModal from './TaskSqlJXModal'
import TaskSqlFieldMapModal from './TaskSqlFieldMapModal'

export default {
  name: 'CSTaskSqlModal',
  props: {
    // //表单禁用
    // disabled: {
    //     type: Boolean,
    //     default: false,
    //     required: false
    // }
  },
  components: { TaskSqlJXModal,TaskSqlFieldMapModal},
  data() {
    return {
      description: '任务sql配置',
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      disableSubmit: false,
      title: '任务配置',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      url: {
        getAllSourse: '/dcloud-platform/api/collectSource/v1/getAllSourse'
      },
      options: [],
      appendType_options: [{ tid: 'insert', value: '插入' }, { tid: 'replace', value: '替换' }],
      syncType_options: [{ tid: '0', value: '全量' }, { tid: '1', value: '增量' }],
      collectType_options: [{ tid: 'select', value: '查询' }, { tid: 'log', value: '日志' }],
      taskState_options: [{ tid: 'stop', value: '暂停' }, { tid: 'running', value: '进行' }],
      disabled: true
    }
  },
  created() {
    this.getAllSourceType()
  },
  computed: {},
  methods: {
    getAllSourceType() {
      postAction(this.url.getAllSourse, {}).then(res => {
        if (res.success) {
          console.log(res)
          this.options = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    showInfo(record) {
      let that = this
      that.visible = true
      that.disabled = true
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record)
      that.model.isMust = that.model.isMust + ''
      console.log('that.model=', that.model)
    },
    edit(record) {
      let that = this
      that.visible = true
      that.disabled = false
      //根据屏幕宽度自适应抽屉宽度
      this.resetScreenSize()
      that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record)
      that.model.isMust = that.model.isMust + ''
      console.log('that.model=', that.model)
    },
    add() {
      let that = this
      that.visible = true
      that.disabled = false
    },
    isDisabledAuth(code) {
      return disabledAuthFilter(code)
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.nextDepartOptions = []
      this.departIdShow = false
      this.$refs.form.resetFields()
    },
    moment,
    handleCancel() {
      this.close()
    },
    //表单提交
    handleSubmit() {
      const that = this
      let obj = handleSubmitPost()

      obj.then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
        that.close()
      })

    },

    //表单提交
    handleSubmitPost() {
      let obj
      if (this.model.tid) {
        obj = editCollectTask(this.model)
      } else {
        obj = addCollectTask(this.model)
      }

      return obj;

    },

    jxcx(){
      this.handleSubmitPost();
      this.$refs.jxTable.showTable(this.model.taskSqlTid);
    },

    genFieldMap(){
      this.$refs.fieldMap.showTable(this.model.taskSqlTid);
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}


</style>